import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import Toast from 'react-native-simple-toast'
import { Shadow } from 'react-native-shadow-2';
import IconNavBar from '@/components/IconNavBar'
import { sectokenPayWithProps } from '@/config/navigatorProps'
import { PayWithArray } from '@/config/config'
import { getValue } from "@/utils/deviceStorage";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenPayWith = (props) => {

    const dispatch = useDispatch();
    const selectedPayWith = useSelector((state) => state.sectokenSafeReducer.selectedPayWith);
    const payWithList = useSelector((state) => state.sectokenSafeReducer.payWithList);
    const [coinType, setCoinType] = useState('');

    useEffect(() => {
        let str = getValue('coinType')
        setCoinType(str)
    }, []);

    const handlePressItem = (payload) => {
        if (payload && parseFloat(payload.value) > 0) {
            dispatch({ type: "setSelectedPayWith", value: payload || {} });
        } else {
            Toast.showWithGravity(
                'insufficient funds!',
                Toast.SHORT,
                Toast.CENTER)
        }
    }

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const renderItem = (item, isSelected) => {
        return (
            <View style={{ ...styles.itemContent, backgroundColor: isSelected ? '#FFFFFF' : '#F7F7F7' }}>
                <View style={{ flex: 5, flexDirection: 'row', alignItems: 'center' }}>
                    <Image source={PayWithArray[item.profileImg]} style={styles.img} />
                    <View style={{ marginLeft: 11 * ratio }}>
                        <Text style={{ ...styles.title1, color: '#2C2C2C' }}>{item.wallet_name}</Text>
                        <Text style={{ ...styles.title1, width: 100 * ratio, color: '#999999' }}
                            ellipsizeMode='middle' numberOfLines={1}>{item.address}</Text>
                    </View>
                </View>
                <View style={{ flex: 5, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
                    <Text style={{ ...styles.title1, color: '#2C2C2C', marginRight: 6 * ratio }}>
                        {item.value?.substring(0, 9)}{coinType}
                    </Text>
                </View>
            </View>
        )
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenPayWithProps} handlePressLeft={handlePressLeft} />
            <View style={{ marginTop: 10 * ratio }}>
                {payWithList ? payWithList.map((item, index) => {
                    const isSelected = item.wallet_name === selectedPayWith.wallet_name ? true : false;
                    return (
                        <TouchableOpacity key={index} style={{ alignItems: 'center' }} onPress={() => { handlePressItem(item) }}>
                            {isSelected ?
                                <View style={{ marginBottom: 12 * ratio }}>
                                    <Shadow offset={[2, 4]}
                                        distance={0} startColor='rgba(0, 0, 0, 0.06)' finalColor='transparent' radius={5}>
                                        {renderItem(item, isSelected)}
                                    </Shadow>
                                </View>
                                :
                                <View style={{ marginBottom: 12 * ratio }}>
                                    {renderItem(item, isSelected)}
                                </View>
                            }
                        </TouchableOpacity>
                    )
                }) : null}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F7F7F7'
    },
    itemContent: {
        width: 330 * ratio,
        height: 65 * ratio,
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#ECECEC',
        borderRadius: 5,
    },
    img: {
        width: 36 * ratio,
        height: 36 * ratio,
        marginLeft: 10 * ratio
    },
    title1: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        lineHeight: 21
    }
})
export default SectokenPayWith